<template>
  <div class="gjf-search">
    <div class="gjf-search-header">
      <van-search placeholder="请输入搜索关键词" />
    </div>
    <div class="gjf-search-history">
      <h3 class="gjf-search-h33">历史记录</h3>
      <div class="gjf-search-item">
        <div v-for="(item,index) in history" :key="index">{{item}}</div>
      </div>
      <h3 class="gjf-search-h3" @click="gjfdel">清空历史记录</h3>
    </div>
    <h3 class="gjf-search-hot">热销商品</h3>
    <div class="gjf-search-hotItem">
      <div class="gjf-search-hotItem-item" v-for="(item,index) in searchJson" :key="index">
        <img :src="item.img">
        <p>{{item.name}}</p>
        <p class="gjf-search-hotItem-item-price"><span class="gjf-search-hotItem-item-price-sel">￥{{item.price}}</span><span @click="addCart(item)" class="iconfont icon-add_circle"></span></p>
      </div>
    </div>
    <Tabbar/>
  </div>
</template>
<script>
import Tabbar from '../components/Tabar'
export default {
  components:{
    Tabbar
  },
  computed:{
    history(){
      return this.$store.state.history
    },
    searchJson(){
      return this.$store.state.searchJson
    }
  },
  methods:{
    gjfdel(){
      this.$store.dispatch("delHistory")
    },
    addCart(item){
      let gjfCart={
        num:1,
        check:false,
        item:item
      }
      this.$store.dispatch('addCart',gjfCart)
    }
  },
  mounted(){
    this.$store.dispatch("searchJson")
  }
}
</script>
<style scoped>
.gjf-search{
  width: 100%;
}
.gif-search-header{
  width: 100%;
  height: 3.75rem;
  display: flex;
  justify-content: start;
  align-items: center;
}
.gjf-search-history{
  width: 100%;
}
.gjf-search-history .gjf-search-h33{
  color: gray;
}
.gjf-search-item{
  width: 100%;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}
.gjf-search-item div{
  width: 15%;
  height: 1.25rem;
  margin:.9375rem 5% 0 5%;
}
.gjf-search-h3{
  color: black;
  text-align: center;
  margin: 1.25rem 0rem;
}
.gjf-search-hot{
  text-align: center;
  margin: 1.25rem 0rem;
}
.gjf-search-hotItem{
  width: 100%;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}
.gjf-search-hotItem-item{
  width: 43%;
  height: 15rem;
  margin: .625rem 0 .625rem 1.25rem;
}
.gjf-search-hotItem-item img{
  width: 100%;
}
.gjf-search-hotItem-item-price{
  width: 100%;
  height: 1.5625rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gjf-search-hotItem-item-price-sel{
  color: red;
}

</style>
